<template>
    <div>
        <div id="head">
            <div>每个人都应该有梦想及追求<br>梦想的权利</div>
        </div>
        <div id="plan">
            <div>促进残疾人就业发展计划</div>
            <div v-for="nmsg in nmsgs" :key="nmsg.title" class="nitem" :class="{ashow: $parent.scrollTop > nmsg.offsetTop}">
                <div :style="{'background-image': 'url('+ nmsg.img +')'}"></div>
                <div :style="{top: nmsg.top, opacity: nmsg.opacity}">{{nmsg.title}}</div>
                <div :style="{top: nmsg.top, opacity: nmsg.opacity}">
                    <p v-for="text in nmsg.text">{{text}}</p>
                </div>
            </div>
        </div>
        <div id="case">
            <div>案例分析</div>
            <div>企业残保金方案：</div>
            <div>跟据企业的工作性质，优先推荐后台残疾人员从事客服或超管等职务，既减低了公司运营成本又避免了残保金处罚</div>
            <div id="exa">例：广州企业雇佣<span>200人</span></div>
            <div id="cost">
                <div>优化前成本估算：<span>207,790.08元</span></div>
                <div>优化后成本：<span>135,224元</span></div>
            </div>
            <div id="cDown">↓成本下降72,566.08元</div>
            <router-link class="contact" to="/consult/2/企业残保金方案" tag="div">联系专家</router-link>
        </div>
        <div id="msg">
            <lslide :height="8.4">
                <litem name="最新资讯">
                    <Sitem v-if="zx" v-for="msg in zx" :msg="msg" :key="msg.url"/>
                    <more url="/news/"/>
                </litem>
                <litem name="常见问题">
                    <div style="height: 0.3rem"></div>
                    <Aitem v-if="ques" v-for="msg in ques" :msg="msg" :key="msg.url"/>
                    <more url="/zt/107"/>
                </litem>
            </lslide>
        </div>
    </div>
</template>
<script>
import lslide from "./public/LSlide_cs"
import litem from "./public/Litem"
import Sitem from "./public/Sitem"
import more from "./public/More";
import Aitem from "./public/Aitem";
import { Get, Post, Port } from "../../server/ajax";
export default {
  data() {
    return {
      nmsgs: [
        {
          img: require("../assets/canji/icon_0.png"),
          title: "政策敏感度",
          text: [
            "了解社会对残疾人就业的政策趋势"
          ],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        },
        {
          img: require("../assets/canji/icon_1.png"),
          title: "自由职业者平台深度合作",
          text: [
            "可为残疾人定制最合适的岗位及培训"
          ],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        },
        {
          img: require("../assets/canji/icon_2.png"),
          title: "与各地残联的紧密联系",
          text: [
            "深度了解残疾人的状况与需求"
          ],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        }
      ],
      zx: null,
      ques: null
    };
  },
  components: {
    lslide,
    litem,
    Sitem,
    Aitem,
    more
  },
  activated() {
    this.$parent.tState = 1;
    this.$parent.fState = 1;
    this.$parent.updata();
  },
  mounted() {
    Post(`${Port}/mobile/cms/news`, {
      page_size: 3
    }, function(data){
      this.zx = data
    }.bind(this))
    Post(`${Port}/mobile/cms/subjects`, {
      page_size: 2,
      cid: 107
    }, function(data) {
      this.ques = data
    }.bind(this))
    var arr = Array.prototype.slice.call(this.$el.children[1].children, 1);
    var _this = this
    arr.forEach((e, i) => {
      _this.nmsgs[i].offsetTop = e.offsetTop - document.body.clientHeight * 0.8
    })
  }
};
</script>
<style scoped>
#head {
  height: 6.17rem;
  padding-top: 2.6rem;
  background-size: cover;
  background-image: url("~@/assets/canji/banner.png");
}
#head>div{
    font-size: 0.42rem;
    line-height: 0.6rem;
    color: #fff;
    text-align: center;
}
#plan {
  padding: 1.6rem 0 0;
  text-align: center;
}
#plan > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#case{
    /* height: 10.45rem; */
    padding: 1.7rem 0.35rem 0;
    background-color: #f4f5f7;
    padding-bottom: 1.6rem;
}
#case>div:nth-child(1){
    font-size: 0.36rem;
    color: #333;
    text-align: center;
    font-weight: bold;
}
#case>div:nth-child(2){
    font-size: 0.3rem;
    color: #666;
    font-weight: bold;
    margin-top: 0.65rem;
}
#case>div:nth-child(3){
    font-size: 0.28rem;
    color: #999;
    line-height: 0.5rem;
    font-style: italic;
    letter-spacing: 0.02rem;
    margin-top: 0.25rem;
}
#exa{
    font-size: 0.28rem;
    color: #666;
    margin: 0.6rem 0 0.2rem;
}
#exa>span{
    color: #333;
    margin-left: 0.1rem;
}
#cost{
    border-top: 0.01rem solid #ccc;
    border-bottom: 0.01rem solid #ccc;
    padding: 0.2rem 0;
}
#cost>div{
    font-size: 0.28rem;
    color: #666;
    line-height: 0.45rem;
}
#cost span{
    float: right;
    color: #333;
    font-weight: bold;
}
#cost>div:nth-child(2)>span{
    color: #ee5978;
}
#cDown{
    float: right;
    font-size: 0.28rem;
    color: #ee5978;
    font-style: Oblique;
    margin: 0.24rem 0 0.72rem;
    font-weight: bold;
}
.contact{
    width: 4rem;
    height: 0.72rem;
    border-radius: 0.36rem;
    background-color: #ee5978;
    color: #fff;
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.72rem;
    margin: 0 auto;
    clear: both;
}
#msg{
    padding-top: 1rem;
}
</style>